<template>
    <orh-trees :treesHead="treesHead" reload  @on-reload="refresh">

        <Tree :data="trees" slot="trees" @on-select-change="itemChange"></Tree>

        <DatePicker @on-change="daterangeChange" style="width:200px;margin-left: -9px;" size="small" type="daterange" placeholder="请选择时间段" slot="option"></DatePicker>

        <Select v-model="section" style="width:100px;margin: 0 10px;" clearable slot="option" size="small">
            <Option v-for="(item, index) in sectionList" :key="index" :value="item.value">{{ item.label }}</Option>
        </Select>
        
        <Button type="primary" @click="handleSubmit" size="small" slot="option">筛选</Button>

        <orh-sub-table slot="content">
            <Table border stripe :columns="columns" :data="data" :loading="tableload" slot="table"></Table> 
        </orh-sub-table>

    </orh-trees>
</template>
                
<script>
export default {
    name: 'dutymodule-gradegroupduty',
    data () {
        return {
            tableload:false,
            condition: '',
            an_time: null,
            en_time: null,
            section: null,
            treesHead: {
                title: '选择年级组',
                button: false,
                button_text: '添加按钮'
            },
            sectionList: [
                {value: 1, label:'早自习'},
                {value: 5, label:'早读'},
                {value: 6, label:'自愿值班'},
                {value: 2, label:'第一晚自习'},
                {value: 3, label:'第二晚自习'},
                {value: 4, label:'第三晚自习'}
            ],
            data:[],
            trees:[],
            columns: [],
            
            url: 'api/watchlist/v1/admininspecttermcheck/classbeteachergrade?department_id=',
            
            treesUrl: 'api/watchlist/v1/get/departmentstest/test',
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 选择时间
         * 
         ************************************************************/
        daterangeChange (val) {
            this.an_time = val[0] != ''?val[0]:null
            this.en_time = val[1] != ''?val[1]:null
        },
        
        /************************************************************
         * 
         * 选择时间
         * 
         ************************************************************/
        handleSubmit () {
            this.condition = ''
            if (this.an_time != null && this.en_time != null) {
                this.condition += '&an_time=' + this.an_time + '&en_time=' + this.en_time
            }
            if (this.section != null) {
                this.condition += '&section=' + this.section
            }
            this.data = []
            this.columns = []
            this.tableload = true
            this.queryData ()
        },
        
        /************************************************************
         * 
         * 年级组数据
         * 
         ************************************************************/
        treesData () {
            this.$http.get(this.treesUrl).then(val=>{
                val.data.forEach((el, i) => {
                    // if (i == 0) this.items = el.id
                    this.trees.push({
                        title: el.department_name.zh?el.department_name.zh:el.department_name.mn,
                        value: el.id,
                    })
                })
                
            }).catch(err => {
                console.log(err)
            })
        },
        
        /************************************************************
         * 
         * 选择树菜单
         * 
         ************************************************************/
        itemChange (val) {
            if(val.length != 0){
                this.data = []
                this.columns = []
                this.tableload = true
                this.items = val[0].value
                this.queryData ()
            }
        },
        
        /************************************************************
         * 
         * 手动刷新数据
         * 
         ************************************************************/
        refresh () {
            this.data = []
            this.columns = []
            this.condition = ''
            this.section = null
            this.an_time = null
            this.en_time = null
            this.tableload = true
            this.queryData()
        },
        
        /************************************************************
         * 
         * 获取列表数据
         * 
         ************************************************************/
        queryData () {
            this.$http.get(this.url + this.items + this.condition).then(val=>{
                this.handelData(val.data[0])
                this.data = val.data
                this.tableload = false
            }).catch(err => {
                this.tableload = false
            })
        },
        
        /************************************************************
         * 
         * 数据处理
         * 
         ************************************************************/
        handelData (data) {
            this.columns.push({
                title: '教师名称',
                minWidth: 150,
                fixed:'left',
                align: 'center',
                render:(h,params)=> {
                        return h('span',params.row.teacher_name?params.row.teacher_name.zh?params.row.teacher_name.zh:params.row.teacher_name.mn:'')
                    },
            })
            data.watchlist.forEach(el => {
                this.columns.push({
                    title: el.watchlist_name.zh?el.watchlist_name.zh:el.watchlist_name.mn,
                    minWidth: 150,
                    align: 'center',
                    value: el.watchlist_id,
                    render: (h, params) => {
                        let name = params.row.watchlist.find(i => i.watchlist_id == params.column.value)
                        return h('div', name.cont)
                    }
                })
            })
        }
    },
    created () {
        this.treesData ()
    },
}
</script>